<template>
	<view class="content">
		<view class="swiper_box">
			<view class="back_header" :style=" 'box-sizing: content-box;height:' + header.height + 'px;' + 'padding-top:' + header.top + 'px;padding-bottom:6rpx'">
				<view class="inner">
					<image src="/static/images/detail/back.png" mode="" class="mine-return-img" @click="return_back"></image>
				</view>
			</view>
			<template v-if="homeSlide.length > 0">
				<swiper autoplay="true"
						circular="true" 
						interval="3000" 
						class="swiper"
						:style="{height:swiperHeight  + 'rpx'}"
						@change="getCurrent">
					<swiper-item class="swiper_item" v-for="(item , index) in homeSlide" :key="index">
						<image :id="index"
						 :style="{height:swiperHeight  + 'rpx'}"
						 @load="onImageLoad" :src="item" ></image>
					</swiper-item>
				</swiper>
			</template>
			<template v-else-if="detailData.video_url && homeSlide.length == 0">
				<view class="video_box">
					<video 
					id="detailVideo"
					object-fit="cover"
					controls="true"
					:src="detailData.video_url"
					:autoplay="true"
					 :loop="false"
					 enable-play-gesture = "true"
					 ></video>
				</view>
			</template>
			
			<template v-else>
				<view class="swiper"></view>
			</template>
			<view class="msg-count-box" v-if="showImgnotice()" :style="{top:msgCountBoxTop  + 'rpx'}">
				<view v-if="gifts_recent.length > 0" class="msg">
					<mnoticebar :isDetail="true" :leftIcon="false" bg-color="transparent" color="#474A58" :list="gifts_recent"></mnoticebar>
				</view>
				<view v-else class="msg-empty"></view>
				<view  v-show="showPageNumber()" class="swiper_current">
					{{ (homeSlide.length == 0) ? 0 : (current + 1)}}/{{homeSlide.length}}
				</view>
			</view>
			<view class="msg-count-box-video" v-else>
				<view v-if="gifts_recent.length > 0" class="msg">
					<mnoticebar :isDetail="true" :leftIcon="false" bg-color="transparent" color="#474A58" :list="gifts_recent"></mnoticebar>
				</view>
			</view>

			<view class="card">
				<view class="title">
					<view class="left">
						<image @click.stop="toPersionHomeAction" :src="userInfo.avatar || 'http://static.kuaimayoupin.com/5814340611455953.png'" mode="aspectFit"></image>
						<view class="name">
							{{userInfo.nick_name || "匿名"}}
						</view>
						<view class="tag" v-if="userInfo.user_status">
							{{ userInfo.user_status || ""}}
						</view>
						<view class="fate_value" v-if="detailData.fate_value">
							{{ "缘分值" + (detailData.fate_value) }}
						</view>
					</view>
					<view class="right">
						<view class="time">
							{{getDate()}}
						</view>
						<view @click="followAction" 
						:class="['follow', hasFollow ? 'hasfollow' : '']" 
						>
							<view v-if="hasFollow===false" class="follow-add">
								<u-icon name="plus" color="#FFFFFF" size="28"></u-icon>
							</view> 
							<view>{{hasFollow ? "已关注" : "关注"}}</view>
						</view>
					</view>
				</view>
				<view class="text">
					{{detailData.note || ""}}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="input-box" @click="clickFind">
				<input  type="text" value="" placeholder-class="placeholder_text" placeholder="心动不如行动，快来打个招呼吧" />
				<view class="input-mask" @click.stop="heartMessageAction"></view>
			</view>
			<view class="bottom-right-box">
				<view @click.stop="praiseAction()" class="heart">
					<image :src="getAixin()" mode=""></image>
					<text>{{detailData.like_count || 20 }}</text>
				</view>
				<view @click.stop="heartMessageAction" class="flower">
					<image :src="getFlower()" mode=""></image>
					<text>{{detailData.gifts_count || 0}}</text>
				</view>
				<view class="share">
					<image src="../../../static/images/detail/share.png" mode=""></image>
					<text>分享</text>
					<button class="share-btn" open-type="share"></button>
				</view>
			</view>

		</view>
		<!-- 弹框 -->
		<authDialog :isShow='isShowAuth' v-on:close="hideAuthAction" :userName="userInfo.nick_name" :avatar="userInfo.avatar"></authDialog>
		<helloGiftView  :giftsData="giftsData" :isShow="showHello" v-on:dismiss="helloDismissAction"></helloGiftView>
		<loginDialog v-on:goProtocol="goProtocol" :isShow="isShowLogin" v-on:decryptPhoneNumber="decryptPhoneNumber" v-on:dismiss="loginDismiss"></loginDialog>
	</view>
</template>

<script>
	import {
		jsDateDiff
	} from '@/util/tool.js';
	import {
		EventBus
	} from '@/util/event-bus.js'
	import wxKeyManager from '@/util/getWXKey.js'
	import authDialog from '../components/auth-dialog.vue';
	import mnoticebar from '@/components/notice/column-notice.vue';
	/// 关注对话框
	import helloGiftView from '@/pages/home/components/hello-gift-view.vue';
	/// 登录
	import loginDialog from '@/components/login/login-dialog.vue';
	
	import {
		getFollowStatus,
		followRequest,
		followCancleRequest,
		giveLike,
		getGiftsRecentRequest,
		getGiftsList,
		getTrendsDetail,
		apply
	} from '@/api/home/home.js'
	let allow = true;
	export default {
		components: {
			authDialog,
			mnoticebar,
			helloGiftView,
			loginDialog
		},
		data() {
			return {
				header: {
					top: 0,
					height: 0,
					allHeight: 0
				},
				isShowAuth: false,
				current: 0,
				detailData: {},
				userInfo: {},
				certificated: false,
				hasFollow: false,
				homeSlide: [],
				gifts_recent: [],
				showHello: false,
				giftsData:{},
				gifts_list:[],
				pagesLength: 0,
				trendsId:"",
				userId:"",
				videoContext:undefined,
				swiperHeight:990,
				calculateHeights:{},
				viewWidth:750,
				msgCountBoxTop:895,
				isShowLogin:false
				
			}
		},
		created() {
			const header = uni.getMenuButtonBoundingClientRect();
			this.header.top = header.top;
			this.header.height = header.height;
			this.header.allHeight = header.top + header.height + 6;
			this.certificated = getApp().globalData.userInfo.certificated || false
		},
		onShareAppMessage(res) {
			let url = '/pages/home/detial/detial?trendsId='+ this.trendsId + "&userId=" + this.userId
			return {
				title: '最近超好玩超火爆的脱单神器,没时间解释啦,快点来看看吧',
				path: url
			};
		},
		
		onLoad: function(option) {
			let pages = getCurrentPages()
			this.pagesLength = pages.length;
			this.trendsId = option.trendsId || "";
			this.userId =  option.userId || "";
			this.requestDetail();
			this.getFollowStatus();
			this.getGiftsRecent();
			this.getGiftsListRequest();
		},
		onHide() {
			if (this.videoContext) {
				this.videoContext.stop()
			} 
		},
		methods: {
			goProtocol(){
			   	uni.navigateTo({
					   url: '/pageA/protocol/protocol'
				   });
			},
			clickFind(){
				console.log('pppp')
			},
			getDate() {
				let dateStr = this.detailData.created_time || ""
				if (dateStr === "") {
					return ""
				}
				return jsDateDiff(dateStr)
			},
			requestDetail() {
				let data = {
					"id": this.trendsId
				};
				let that = this
				uni.showLoading()
				getTrendsDetail(data).then(res => {
					console.log("动态详情----------", res);
					uni.hideLoading()
					if (res.status == 1) {
						that.detailData = res.data;
						that.homeSlide = that.detailData.pic_urls || [];
						that.userInfo = that.detailData.user_info || {};
						that.handleDetail()
					}
				}, err => {
					uni.hideLoading()
					console.log("动态详情-------------error", err)
				})
			},
			handleDetail(){
				if (this.detailData.video_url && this.homeSlide.length == 0) {
					this.videoContext = uni.createVideoContext('detailVideo')
					console.log("video_url-------------error", this.detailData.video_url)
				}
			},
			getFollowStatus() {
				let id = this.userId || "";
				let data = {
					"id": id
				};
				let that = this
				getFollowStatus(data).then(res => {
					console.log("关注结果----------", res);
					var resMeg = "";
					if (res.status == 1) {
						that.hasFollow = res.data
					}
				}, err => {
					that.hasFollow  = false
				})
			},
			getFlower() {
				if (this.detailData.has_send_gifts) {
					return "../../../static/images/detail/flower_1.png"
				} else {
					return "../../../static/images/detail/flower_2.png"
				}
			},
			getGiftsRecent() {
				var dataJson = {
					userId : this.userId
				}
				getGiftsRecentRequest(dataJson).then(res => {
					console.log("详情---getGiftsRecent------", res.data);
					if (res.status == 1) {
						this.gifts_recent = res.data
						if (this.gifts_recent.length == 1) {
							this.gifts_recent = this.gifts_recent.concat(res.data);
						}
					}
				})
			},
			return_back() {
				if (this.pagesLength > 1) {
					uni.navigateBack()
				} else {
					uni.reLaunch({
					    url: '/pages/home2/home'
					});
				}
				
			},
			getCurrent(val) {
				// console.log(val.detail)
				this.current = val.detail.current
				let currentIndex = this.current + ""
				this.swiperHeight =  this.calculateHeights[currentIndex].imageHeight || 990
				this.msgCountBoxTop =  this.swiperHeight - 95
			},
			getAixin() {
				if (this.detailData.has_give_like == true) {
					return "../../../static/images/home/aixin.png"
				} else {
					return "../../../static/images/detail/heart_2.png"
				}
			},
			getGiftsListRequest(){
				getGiftsList().then(res=>{
					if (res.status == 1){
						this.gifts_list = res.data;
						console.log('------gifts-list--------', this.gifts_list);
					}
				})
			},
			followAction() {
				if (!this.checkLogin()) {
					this.toLogin()
					return
				}
				if (this.hasFollow) {
					this.toFollowCancelRequest()
				} else {
					this.toFollowRequest()
				}
			},
			toPersionHomeAction(){
				let url =  '/pageA/personalHome/personalHome?user_id=' + this.userId;
				uni.navigateTo({
					url: url
				});
			},
			// 点赞
			praiseAction() {
				if (!this.checkLogin()) {
					this.toLogin()
					return
				}
				giveLike({
					"id": this.detailData._id || "",
					like: !(this.detailData.has_give_like || false)
				}).then(res => {
					if (res.status == 1) {
						if (this.detailData.has_give_like || false) {
							this.detailData.like_count -= 1
						} else {
							this.detailData.like_count += 1
							uni.showToast({
								title:"我喜欢你点赞的样子哦",
								icon:"none"
							})
						}
						this.detailData.has_give_like = !(this.detailData.has_give_like || false)
						var data = {
							_id: this.detailData._id,
							has_give_like: this.detailData.has_give_like
						}
						EventBus.$emit('likeAction', data);
					}
				}, err => {

				})
			},
			toFollowRequest() {
				let id = this.userId || "";
				let data = {
					"id": id
				};
				let that = this
				uni.showLoading({
					title: ''
				});
				followRequest(data).then(res => {
					console.log("关注动作结果----------", res);
					if (res.status == 1) {
						that.hasFollow = true
					} else {
						uni.showToast({
							title: res.message || "关注失败",
							icon: 'none'
						})
					}
					uni.hideLoading();
				},err => {
					uni.hideLoading();
				})
			},
			toFollowCancelRequest() {
				
				let id = this.userId || "";
				let data = {
					"id": id
				};
				let that = this
				uni.showLoading({
					title: ''
				});
				followCancleRequest(data).then(res => {
					console.log("取消关注动作结果----------", res);
					var resMeg = "";
					if (res.status == 1) {
						that.hasFollow = false
					} else {
						uni.showToast({
							title: res.message || "取消关注失败",
							icon: 'none'
						})
					}
					uni.hideLoading();
				},err => {
					uni.hideLoading();
				})
			},
			///打招呼
			heartMessageAction(){
				var parios = {
					userID : this.userInfo.user_id
				}
				apply(parios).then(res => {
					
					console.log(res);
				},fail => {
					if(fail.message == '该用户已经是好友'){
						var jsonData = {};
						jsonData.imgUrl =  this.giftsData.userInfo.avatar;
						jsonData.user_id =  this.giftsData.userInfo.user_id;
						jsonData.user_id2 =  this.userId;
						jsonData.username = this.giftsData.userInfo.nick_name;
						setTimeout(function(){
							uni.navigateTo({
								url: "/pageIM/HM-chat/HM-chat?data="+JSON.stringify(jsonData)
							});
						},1000)
						return;
					}
				})
				if (!this.checkLogin()) {
					this.toLogin()
					return
				}
				// if	(this.certificated == false) {
				// 		this.isShowAuth = true
				// 		return
				// } 
				let giftsData = {}
				giftsData.gifts = this.gifts_list
				giftsData.userInfo = this.userInfo
				this.giftsData = giftsData
				this.showHello = true
			},
			hideAuthAction(){
				this.isShowAuth = false
			},
			helloDismissAction(){
				this.showHello = false
			},
			onImageLoad(e) {
				let id = e.currentTarget.id;
				let scale = this.viewWidth / e.detail.width;
				let height = scale * e.detail.height;
				console.log("e-------",e);
				console.log(scale);
				console.log(height);
				if (this.calculateHeights[id]) {
					this.calculateHeights[id].imageHeight = height;
				} else {
					this.calculateHeights[id] = {
						imageHeight: height
					};
				}
				// 图片加载完刷新位置节流一下，提升性能
				this.throttle(() => {
					let currentIndex = this.current + ""
					this.swiperHeight =  this.calculateHeights[currentIndex].imageHeight || 990
					this.msgCountBoxTop =  this.swiperHeight - 95
				}, 100);
			},
			throttle(callback, time = 400) {
				if (!allow) return false;
				allow = false;
				setTimeout(function() {
					allow = true;
					callback();
				}, time);
			},
			//获取用户手机号
			decryptPhoneNumber(e) {
				let that  = this
				wxKeyManager.decryptPhoneNumber(e).then(res=>{
					console.log("wxkmanager-pohone---",res)
					that.isShowLogin = false;
					EventBus.$emit('detailLoginSuccess', true);
					that.getFollowStatus();
					that.getGiftsRecent();
					that.getGiftsListRequest();
				})
			},
			toLogin(){
				this.isShowLogin = true
			},
			loginDismiss(){
				this.isShowLogin = false
			},
			checkLogin(){
				if (uni.getStorageSync('token')) {
					return true
				}
				return false
			},
			showImgnotice(){
				return this.gifts_recent.length > 0 ||  this.showPageNumber()
			},
			showPageNumber(){
				return this.homeSlide.length > 0
			},
			showVideonotice(){
				// 视频，有送礼物的数据
				let video_url =  this.detailData.video_url || ""
				return (video_url.length > 0) && (this.homeSlide.length == 0) &&  (this.gifts_recent.length > 0)
			}
			
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	page {
		background-color: #FFFFFF;
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #FFFFFF;

		.back_header {
			box-sizing: content-box;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;

			.inner {
				padding-top: 10rpx;

				image {
					display: block;
					width: 24px;
					height: 24px;
				}
			}
		}

		.swiper_box {
			// height: 990rpx;
			height: 100%;
			width: 100%;

			.swiper {
				height: 990rpx;
				width: 100%;
				.swiper_item {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					width: 100%;
					image {
						width: 750rpx;
						height: 100%;
					}
					background-color: #f5f5f5;
				}
				
			}

			.video_box {
				display: felx;
				height: 990rpx;
				width: 100vw;
				background-color: yellow;
				align-items: center;
				justify-content: center;
				video {
					width: 100%;
					height: 100%;
				}
			}

			.msg-count-box {
				width: 100%;
				position: absolute;
				top: 895rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;

				.msg-empty {
					bottom: 474rpx;
					left: 20rpx;
					width: 346rpx;
					height: 64rpx;
				}

				.msg {
					bottom: 474rpx;
					left: 20rpx;
					width: 346rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: rgba(255, 255, 255, 0.6);
					border-radius: 4rpx;
					text-align: center;
					vertical-align: middle;
				}

				.swiper_current {
					background: rgba(255, 255, 255, 0.6);
					border-radius: 18rpx;
					right: 20rpx;
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(71, 74, 88, 1);
					line-height: 42rpx;
					padding: 0 18rpx;
				}
			}
			.msg-count-box-video {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				height: 64rpx;
				.msg {
					bottom: 474rpx;
					left: 20rpx;
					width: 346rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: rgba(255, 255, 255, 0.6);
					border-radius: 4rpx;
					text-align: center;
					vertical-align: middle;
				}
			}
			.card {
				width: 100%;
				height: 100%;
				margin-top: -12rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 12rpx 12rpx 0px 0px;
				box-sizing: border-box;
				z-index: 100;
				padding: 32rpx 20rpx 32rpx 20rpx;
				margin-bottom: 110rpx;

				.title {
					height: 92rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 92rpx;
							height: 92rpx;
							display: block;
							border-radius: 50%;
						}

						.name {
							line-height: 48rpx;
							font-size: 34rpx;
							font-weight: 500;
							color: #474A58;
							margin: 0 10rpx 0 20rpx;
						}

						.tag {
							width: 124rpx;
							line-height: 40rpx;
							background: #FFF6EB;
							border-radius: 4rpx;
							border: 1rpx solid #FFAA37;
							font-size: 26rpx;
							color: #FFAA37;
							text-align: center;
						}
						.fate_value{
							width: 124rpx;
							line-height: 40rpx;
							background: #FFF6EB;
							border-radius: 4rpx;
							border:1rpx solid rgba(255, 89, 152, 1);
							font-size: 26rpx;
							color: rgba(255, 89, 152, 1);
							text-align: center;
							margin-left: 7rpx;
						}
					}

					.right {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.time {
							line-height: 32rpx;
							font-size: 22rpx;
							color: #8389A0;
						}
						.follow {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							width: 120rpx;
							height: 64rpx;
							line-height: 64rpx;
							font-size: 30rpx;
							font-weight: 500;
							background: linear-gradient(135deg, #FC4F91 0%, #FD6CE6 100%);
							border-radius: 4rpx;
							color: #fff;
							margin-left: 10rpx;
							text-align: center;
							.follow-add {
								display: flex;
								align-items: center;
								justify-content: center;
								height: 64rpx;
								margin-right: 8rpx;
							}
							
						}
						.hasfollow{
							background: #F3F6F8;
							border-radius: 4rpx;
							border: 2rpx solid #DFE1EC;
							color: #8389A0;
							
							
						}
					}
				}

				.text {
					line-height: 45rpx;
					font-size: 30rpx;
					color: #474A58;
					padding-top: 22rpx;
				}

			}
		}


		.bottom {
			box-sizing: border-box;
			position: fixed;
			z-index: 200;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 104rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;

			.input-box {
				margin-right: 40rpx;
				width: 426rpx;
				height: 64rpx;
				position: relative;

				input {
					width: 416rpx;
					height: 64rpx;
					background: #F3F6F8;
					border-radius: 4rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.input-mask {
					position: absolute;
					z-index: 10;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}

			.placeholder_text {
				font-size: 26rpx;
				color: #8389A0;
				line-height: 64rpx;
			}

			.bottom-right-box {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				justify-content: space-between;

				.heart {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 46rpx;
						height: 40rpx;
						margin-bottom: 6rpx;
					}

					text {
						line-height: 32rpx;
						font-size: 22rpx;
						color: #8389A0;
					}
				}

				.flower {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 42rpx;
						height: 50rpx;
					}

					text {
						line-height: 32rpx;
						font-size: 22rpx;
						color: #8389A0;
					}
				}

				.share {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					image {
						width: 40rpx;
						height: 38rpx;
						margin-bottom: 6rpx;
					}

					text {
						line-height: 32rpx;
						font-size: 22rpx;
						color: #474A58;
					}

					.share-btn {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						right: 0;
						z-index: 10;
						background: transparent;
					}
					button::after{ border: none;}
				}
			}
		}


	}
</style>
